<template>
	<view style="min-height: 1000rpx;">
		<view class="gui-margin-top">
			<gui-swiper :swiperItems="swiperItems" imgMode="scaleToFill" :width="750" :height="330"></gui-swiper>
		</view>

		<view class="gui-margin-top gui-bg-gray gui-padding">
			<gui-speaker :items="speakerMsgs" @change="chang1">
				<text slot="icon" class="gui-block-text gui-icons demo-icon gui-color-blue">&#xe656;</text>
			</gui-speaker>
		</view>

		<view style="margin-top:15rpx" class="gui-flex gui-rows gui-nowrap">
			<view class="gui-text demo gui-bg-gray gui-color-black gui-grids-icon gui-icons">&#xe61d; 扫码核销</view>
			<view class="gui-text demo gui-bg-gray gui-color-black gui-grids-icon gui-icons">&#xe611; 助教考核</view>
			<view class="gui-text demo gui-bg-gray gui-color-black gui-grids-icon gui-icons">&#xe611; 教练考核</view>
		</view>

		<view style="margin-top:66rpx;margin-left: 40rpx;" class="gui-padding-x  gui-color-black">
			<text class="gui-h6 gui-color-gray gui-bold">附近商家</text>
		</view>

		<view style="margin-top:20rpx;" class="gui-padding-x  gui-color-black">
			<view class="graceSelectMenuItem" style="margin-right: 580rpx;">
				<gui-select-menu :items="selectMenu1" @select="select1" ref="selectMenu1"></gui-select-menu>
			</view>
		</view>

		<view class="gui-margin-top">
			<gui-product-list :products="products" @gotoInfo="gotoInfo"></gui-product-list>
		</view>

		<view style="height: 250rpx;"></view>


		<view class="gui-flex gui-rows gui-nowrap gui-space-between" style="height:100rpx;margin-top: -200rpx;">
			<view class="gui-footer-icon-buttons" @tap="navChang(0)">
				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons"
					:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe63b;</text>
				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color"
					:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
			</view>
			<view class="gui-footer-icon-buttons" @tap="navChang(1)">
				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons"
					:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe62f;</text>
				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color"
					:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">订单</text>
			</view>
			<!-- 凸出按钮占位  普通按钮 实现下面的 gui-footer-icon-buttons 即可 -->

			<view class="gui-footer-icon-buttons" @tap="navChang(2)">
				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons"
					:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6fe;</text>
				<text class="gui-footer-icon-buttons-text gui-block-text"
					:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">我的</text>
			</view>
		</view>
		<gui-iphone-bottom></gui-iphone-bottom>



	</view>

</template>

<script>
	var img =
		"https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2MHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=90";
	export default {
		data() {
			return {
				navCurrent: 0,
				products: [{
						"name": "vivo iQOO旗舰新品",
						"img": "http://gju2.alicdn.com/tps/i3/O1CN0147JEEe23ooz3rBDAX_!!1-juitemmedia.gif",
						"priceMarket": "2999",
						"price": "2888",
						"selledNum": "3815"
					},
					{
						"name": "牛仔老爹裤，拯救不完美腿型！",
						"img": "https://m.360buyimg.com/babel/jfs/t1/31698/11/11865/218814/5cb68870Ebf26e1bd/dbe080c29fb0aeff.jpg!q70.jpg",
						"priceMarket": "1078",
						"price": "888",
						"selledNum": "8018"
					},
					{
						"name": "爆品！美的大1.5匹变频家用空调",
						"img": "http://gju4.alicdn.com/tps/i3/O1CN01yb1RIp24Nd4gYmg3c_!!1-juitemmedia.gif",
						"priceMarket": "2799",
						"price": "2499",
						"selledNum": "856"
					},
					{
						"name": "修身纯棉T恤女 多款 多领 多色选择",
						"img": "https://img14.360buyimg.com/n7/jfs/t1/75983/15/1724/115168/5d00a0eaE1af580a5/66154c912d92f7e9.jpg",
						"priceMarket": "128",
						"price": "39",
						"selledNum": "9089"
					},
					{
						"name": "vivo iQOO旗舰新品",
						"img": "http://gju2.alicdn.com/tps/i3/O1CN0147JEEe23ooz3rBDAX_!!1-juitemmedia.gif",
						"priceMarket": "2999",
						"price": "2888",
						"selledNum": "3815"
					},
					{
						"name": "牛仔老爹裤，拯救不完美腿型！",
						"img": "https://m.360buyimg.com/babel/jfs/t1/31698/11/11865/218814/5cb68870Ebf26e1bd/dbe080c29fb0aeff.jpg!q70.jpg",
						"priceMarket": "178",
						"price": "888",
						"selledNum": "8018"
					},
					{
						"name": "爆品！美的大1.5匹变频家用空调",
						"img": "http://gju4.alicdn.com/tps/i3/O1CN01yb1RIp24Nd4gYmg3c_!!1-juitemmedia.gif",
						"priceMarket": "2799",
						"price": "2499",
						"selledNum": "856"
					},
					{
						"name": "修身纯棉T恤女 多款 多领 多色选择",
						"img": "https://img14.360buyimg.com/n7/jfs/t1/75983/15/1724/115168/5d00a0eaE1af580a5/66154c912d92f7e9.jpg",
						"priceMarket": "128",
						"price": "39",
						"selledNum": "9089"
					},
					{
						"name": "vivo iQOO旗舰新品",
						"img": "http://gju2.alicdn.com/tps/i3/O1CN0147JEEe23ooz3rBDAX_!!1-juitemmedia.gif",
						"priceMarket": "2999",
						"price": "2888",
						"selledNum": "3815"
					},
					{
						"name": "牛仔老爹裤，拯救不完美腿型！",
						"img": "https://m.360buyimg.com/babel/jfs/t1/31698/11/11865/218814/5cb68870Ebf26e1bd/dbe080c29fb0aeff.jpg!q70.jpg",
						"priceMarket": "178",
						"price": "888",
						"selledNum": "8018"
					},
					{
						"name": "爆品！美的大1.5匹变频家用空调",
						"img": "http://gju4.alicdn.com/tps/i3/O1CN01yb1RIp24Nd4gYmg3c_!!1-juitemmedia.gif",
						"priceMarket": "2799",
						"price": "2499",
						"selledNum": "856"
					},
					{
						"name": "修身纯棉T恤女 多款 多领 多色选择",
						"img": "https://img14.360buyimg.com/n7/jfs/t1/75983/15/1724/115168/5d00a0eaE1af580a5/66154c912d92f7e9.jpg",
						"priceMarket": "128",
						"price": "39",
						"selledNum": "9089"
					}
				],
				speakerMsgs: [{
						title: "GraceUI 更快、更好的前端更好的前端更好的前端更好的前端UI",
						url: "../index/index",
						opentype: "navigate"
					},
					{
						title: "lesscode.work - 精品 IT 课程中心",
						url: "../index/index",
						opentype: "switchTab"
					}
				],
				swiperItems: [{
						img: img,
						url: '',
						title: "测试标题 001",
						opentype: 'navigate'
					},
					{
						img: img,
						url: '',
						title: "测试标题 002",
						opentype: 'navigate'
					},
					{
						img: img,
						url: '',
						title: "测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
						opentype: 'navigate'
					},
				],
				swiperItems2: [],
				selectMenu1: ['全部', '武昌区', '汉阳区', '江夏区', '洪山区'],
			}
		},
		methods: {
			navChang: function(index) {
				this.navCurrent = index;
			},
			select1: function(index, val) {
				console.log("选择了 " + val);
			},
			chang1: function(e) {
				console.log(e);
			},
			chang2: function(e) {
				console.log(e);
			},
			swiperchange: function(e) {
				console.log(e);
			},
			taped: function(e) {
				uni.showToast({
					title: "您点击了第 " + e + " 个项目",
					icon: "none"
				});
			}
		},
		onLoad: function() {
			// 模拟api加载数据
			setTimeout(() => {
				this.swiperItems2 = [{
						img: img,
						url: '',
						title: "测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
						opentype: 'click'
					},
					{
						img: img,
						url: '',
						title: "测试标题04",
						opentype: 'click'
					},
					{
						img: img,
						url: '',
						title: "测试标题05",
						opentype: 'click'
					}
				]
			}, 1000)
		}
	}
</script>

<style>
	.demo-icon {
		width: 60rpx;
		line-height: 90rpx;
		font-size: 32rpx;
	}

	.demo {
		width: 210rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 10rpx;
	}

	.demo-auto-width {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 10rpx;
	}

	.gui-footer-icon-buttons {
		width: 130rpx;
		height: 80rpx;
		padding: 10rpx;
		flex: 1;
		position: relative;
		margin: 0;
		background-color: #F8F8F8;
	}

	.gui-footer-buttons-ab {
		position: absolute;
		z-index: 101;
		left: 325rpx;
		top: 0rpx;
		width: 110rpx;
		height: 150rpx;
	}

	.gui-footer-buttons-ab-icon {
		width: 110rpx;
		height: 110rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 68rpx;
		background-color: #F7F8FA;
		border-radius: 100rpx;
	}
</style>